<template>
  <div class="ConfirmSeat">
    <!--<x-header :left-options="{backText: ''}">订座记录</x-header>-->
    <Header title="确认订座"></Header>
    <scroller>
      <div style="padding:30px 6px 0 6px;">
        <div class="Orderinfo" style="padding: 0 12px;margin-top: 12px;background: #fff">
          <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
            <div style="flex:1;text-align: left">店铺名称</div>
            <div class="shopname">
              {{shopinfo.name}}
            </div>
          </div>
          <div style="border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
            <div style="text-align: left">座位信息</div>
            <div style="padding: 8px 0;display: flex;flex-wrap:wrap">
              <div class="seat_info" v-for="_item in CheckSeatList">
                {{_item.name}}
                <x-icon type="ios-close-empty" class="iconclose" size="16" @click="DelSeat(_item)"></x-icon>
              </div>
            </div>
          </div>
          <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px;align-items:center">
            <div style="flex: 1;text-align: left">预约时间</div>
            <div style="flex: 1;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              <datetime v-model="noonValue" :min-hour="minHour" :max-hour="maxHour"
                        format="HH:mm" hour-row="{value}点" minute-row="{value}分"
                        @on-change="gettime" v-if="minHour!=0"></datetime>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top:14px">
        <div class="buttom_ru" @click="ConfirmSeat">确认订座</div>
      </div>
    </scroller>
    <!--<confirm v-model="show" :show-cancel-button="false" @on-confirm="into">-->
    <!--<img src="static/icon/pop_icon_!@3x.png" alt="success" style="width: 60px">-->
    <!--<p style="text-align:center;font-size: 16px">{{tiptext}}</p>-->
    <!--</confirm>-->
  </div>
</template>

<script>
  import Vue from 'vue'
  import {XHeader, Datetime, Confirm} from 'vux'
  import Header from './../Header'
  import {mapState} from 'vuex'
  import {ConfirmSeat, TimeRange} from '@/api/mine'
  import moment from 'moment'

  export default {
    name: 'ConfirmSeat',
    data () {
      return {
        orderinfo: [{
          name: '书店名字过长自动截取(玲玲的心爱3号书店)',
          ordertime: '2018-01-01 13:14',
          seattype: ['连排1号', '连排2号', '连排1号', '连排2号', '连排3号', '连排1号', '连排2号', '连排3号']
        }],
        noonValue: moment(new Date()).format('HH:mm'),
        show: false,
        shopinfo: {},
        tiptext: '',
        timeCheck: {},
        isctime: '',
        minHour: 0,
        maxHour: 0
      }
    },
    created () {
      debugger
      this.shopinfo = JSON.parse(this.$route.query.shop)
      this.isctime = this.$route.query.time
      let seatIds = []
      this.CheckSeatList.map(t => {
        seatIds.push(t.id)
      })

      TimeRange({
        'day': this.isctime,
        'seatIds': seatIds,
        'shopId': this.shopinfo.id
      }).then(res => {
        this.minHour = Number(res.data.data.startTime.substring(11, 12)) == 1 ? Number(res.data.data.startTime.substring(11, 13)) : Number(res.data.data.startTime.substring(12, 13))
        this.maxHour = Number(res.data.data.endTime.substring(11, 12)) == 1 ? Number(res.data.data.endTime.substring(11, 13)) : Number(res.data.data.endTime.substring(11, 13))
        console.log(this.minHour, this.maxHour)
        this.timeCheck = res.data.data
      })
    },
    methods: {
      ConfirmSeat () {
        let _this = this
        let seatIds = []
        _this.CheckSeatList.map(t => {
          seatIds.push(t.id)
        })
        ConfirmSeat({
          orderTime: `${_this.isctime} ${_this.noonValue}:00`,
          seatIds: seatIds,
          shopId: _this.shopinfo.id
        }).then(res => {
          if (res.data.status === 'success') {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/my_icon_pay_success@3x.png" style="width: 60px" alt="">
          <p>预约成功，请到订单查看</p>`,
              showCancelButton: false,
              onConfirm () {
                _this.$router.replace({
                  path: `/Order`
                })
              }
            })
          } else {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.msg}</p>`,
              showCancelButton: false,
              onConfirm () {
              }
            })
          }

        })
        _this.show = true
      },
      DelSeat (item) {
        let CheckSeatList = this.CheckSeatList
        CheckSeatList.map(t => {
          if (item.id === t.id) {
            item.status = 1
          }
        })
        this.$store.dispatch('DEL_SEAT', {
          CheckSeatList: item
        })
      },
      into () {
        // this.$router.replace({
        //   path: `/Order`
        // })
      },
      gettime (value) {
        console.log(value)
      }
    },
    computed: {
      ...mapState({
        CheckSeatList: state => state.CheckSeatList,
      })
    },
    components: {
      XHeader,
      Datetime,
      Confirm,
      Header
    }
  }
</script>

<style lang="less" type="text/less">
  .ConfirmSeat {
    color: @font-color;
    .weui-cell_access .weui-cell__ft:after {
      border: none;
    }
    .Orderinfo {
      font-size: 14px;
      .shopname {
        flex: 2;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: @common-color;
      }
      .seat_info {
        font-size: 12px;
        padding: 2px 14px;
        width: 60px;
        margin: 4px;
        border: 1px #F8FAF9 solid;
        border-radius: 3px;
        text-align: center;
        box-shadow: 0px -2px 0px 0px #F8FAF9,
        -2px 0px 0px 0px #F8FAF9,
        2px 0px 0px 0px #F8FAF9,
        0px 2px 0px 0px #F8FAF9;
        position: relative;
        .iconclose {
          position: absolute;
          right: 3px;
          top: 0;
        }
      }
    }
    .buttom_ru {
      width: calc(100% - 30px);
      height: 48px;
      background: @common-color;
      border-radius: 48px;
      color: #fff;
      margin: 0 auto;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
    }
  }

</style>
